<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header" id="header">
			<!-- 顶部状态栏 -->
			<view class="statusBar" :style="{ height: statusBarHeight + 'PX'}"></view>
			<!-- 搜索容器 -->
			<view class="serachview">
				<view class="search" @click="searchClick">
					<vide class="iconfont icon-sousuo"></vide>
					<text>搜你想看...</text>
				</view>
				<view class="record" @click="recordClick">
					<view class="iconfont icon-ziyuanxhdpi"></view>
					<text>记录</text>
				</view>
			</view>
			<view class="swiperNavBar">
				<swiperNavBar
					:scrollIntoView="scrollIntoView"
					:swiperTabList='swiperTabList' 
					:swiperTabIdx='swiperTabIdx' 
					:currentSwiperWidth='currentSwiperWidth' 
					:currentSwiperHeight='currentSwiperHeight' 
					:swiperColor='swiperColor' 
					:swiperCurrentColor='swiperCurrentColor' 
					:currentSwiperLineShow="currentSwiperLineShow"
					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
					:currentSwiperLineAnimatie="currentSwiperLineAnimatie"
					swiperFontSize="16px"
					v-if=" swiperTabList.length > 1 "
					@change="CurrentTab"
				></swiperNavBar>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper 
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" indicator-active-color="#fff" circular
				>
				<swiper-item v-for="(item, index) in videoRecmmendData.slideshow" :key="index" @click="videoDataCilic(item)">
					<image :src="item.vod_pic_slide" mode=""></image>
				</swiper-item>
			</swiper>
			<lwNotice :showScale="true" @itemClick="itemClick" :list="advanceListTwo"
				color="#32CCBC" iconColor="#EA5455" moreColor="#90F7EC"
			></lwNotice>
		</view>
			
		<view class="videoContent" id="videoContent" >
			<aui-loading 
			  :show="auiLoading.show" 
			  :type="auiLoading.type" 
			  :direction="auiLoading.row" 
			  :msg="auiLoading.msg" 
			  :mask="auiLoading.mask"
			  :theme="auiLoading.theme"
			  ref="auiLoading"
			></aui-loading>
			
			<!-- 推荐 -->
			<videoIndexList 
				v-show="initClassifyIndex == 0" 
				:videoData="videoRecmmendData" 
				:scrollViewHeight="videoContentHeight" 
				@videoDataClick="videoDataClick"
			></videoIndexList>
			<!-- 电影 -->
			<videoIndexList
				v-show="initClassifyIndex == 1" 
				:classify="initClassifyIndex"
				:videoData="videoMoiveData" 
				:scrollViewHeight="videoContentHeight" 
				@videoDataClick="videoDataClick"
			></videoIndexList>
			<!-- 连续剧 -->
			<videoIndexList
				v-show="initClassifyIndex == 2" 
				:classify="initClassifyIndex"
				:videoData="videoSitcomData" 
				:scrollViewHeight="videoContentHeight" 
				@videoDataClick="videoDataClick"
			></videoIndexList>
			<!-- 动漫 -->
			<!-- <videoIndexList
				v-show="initClassifyIndex == 3" 
				:classify="initClassifyIndex"
				:videoData="videoData" 
				:scrollViewHeight="videoContentHeight" 
				@videoDataClick="videoDataClick"
			></videoIndexList> -->
			<!-- 综艺 -->
			<!-- <videoIndexList
				v-show="initClassifyIndex == 4" 
				:classify="initClassifyIndex"
				:videoData="videoData" 
				:scrollViewHeight="videoContentHeight" 
				@videoDataClick="videoDataClick"
			></videoIndexList> -->
		</view>
		
		
		
		<noticePopup title="公告" content="正在热刷新，如刷新失败，请点击控制台工具栏上的【重启应用图标】"
			:show="noticeShow" @btnClick="popupNoticeClick" @maskClose="popupNoticeClick"
		></noticePopup>
		<app-update ref="app_update" :force="app_force" :tabbar="true"></app-update>
	</view>
</template>

<script>
	import swiperNavBar from '@/components/swiperNavBar/swiperNavBar.vue'
	import videoIndexList from '@/components/videoIndexList/videoIndexList.vue'
	import auiLoading from '@/components/aui-loading/aui-loading.vue'
	import { aui} from '@/components/aui-loading/common/aui/js/aui.js'
	import { select } from '@/commons/querySelect.js'
	import appUpdate from "@/components/yzhua006-update/app-update.vue"
	import lwNotice from '../../components/lw-notice/lw-notice.vue'
	import noticePopup from '@/components/notice-popup/notice-popup.vue'
	export default {
		components: {
			swiperNavBar,
			videoIndexList,
			auiLoading,
			appUpdate,
			lwNotice,
			noticePopup
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: this.$systemInfo.statusBarHeight,
				
				// 导航条菜单参数
				scrollIntoView:0,
				swiperTabList:[ '推荐','电影','电视剧','动漫','综艺','抢先' ],
				swiperTabIdx:0,
				swiperFontSize: '16px',
				swiperCurrentFontSize: '18px',
				swiperColor:'#FFF',
				swiperCurrentColor:'#fff',
				currentSwiperWidth:'20%',
				currentSwiperHeight:70,
				mainHeight:200,
				currentSwiperLineShow:true,
				currentSwiperLineActiveBg:'#fff',
				currentSwiperLineActiveWidth:'50rpx', 
				currentSwiperLineActiveHeight:'8rpx',
				currentSwiperLineAnimatie: 300,
				swiperNavBarWidth: 300,
				
				// 推荐数据
				videoRecmmendData: {},
				// 电影
				videoMoiveData: {},
				// 连续剧
				videoSitcomData: {},
				// videoContent
				videoContentHeight: 300,
				initClassifyIndex: 0,
				
				auiLoading: {
				    show: false,
				    type: 3,
				    direction: 'col',
				    msg: 'Loading...',
				    mask: false,
					theme: 1
				},
				app_force: false,
				 advanceListTwo:[
				                "1插件压缩包为标准 zip 格式，不要把 rar 等其他格式改名为 zip，会导致无法正确解压",
				                "2插件压缩包为标准 zip 格式，不要把 rar 等其他格式改名为 zip，会导致无法正确解压",
				                "3插件压缩包为标准 zip 格式，不要把 rar 等其他格式改名为 zip，会导致无法正确解压",
				                "4插件压缩包为标准 zip 格式，不要把 rar 等其他格式改名为 zip，会导致无法正确解压"
				],
				// 弹窗公告
				noticeShow: true,
			}
		},
		onLoad() {
			// 预保存播放页面
			// uni.preloadPage({url: '/pages/player/player'})
		},
		async mounted() {
			this.$refs.auiLoading.show()
			const { data: res } = await this.$http({
				url: this.$api.videoIndex
			})
			const videoContent = await select("#videoContent")
			if (res.status !== 200) {
				uni.showToast({
					title: '没有数据',
					icon: 'error'
				})
			}
			this.videoRecmmendData = res.data
			this.videoContentHeight = videoContent.height
			this.$refs.auiLoading.hide()
			this.getAppVersionInfo()
		},
		methods: {
			//tab点击事件
			async CurrentTab(index,item){
				this.swiperTabIdx = index;
				this.scrollIntoView = Math.max(0, index - 1);
				this.initClassifyIndex = index
				switch(index) {
					case 1:
						if (Object.keys(this.videoMoiveData).length !== 0) return 
						const data = await this.getVideoIndexList(this.$api.videoIndexMovie)
						console.log('触发')
						this.videoMoiveData = data
					break
					case 2:
					
					break
					case 3:
					
					break
					default:
					
					break
					
				}
			},
			//滑动事件  
			SwiperChange: function(e){
				this.swiperTabIdx = e.detail.current;
				this.scrollIntoView = Math.max(0, e.detail.current - 1);
				console.log(1)
			},
			// 视频列表被点击
			videoDataClick(data) {
				this.$goto('/pages/player/player', data)
			},
			recordClick() {
				this.$goto('/pages/record/record')
			},
			searchClick() {
				this.$goto('/pages/search/search')
			},
			async getVideoIndexList(url) {
				this.$refs.auiLoading.show()
				const { data: res } = await this.$http({
					url
				})
				if (res.status !== 200) {
					this.$refs.auiLoading.hide()
					uni.showToast({
						title: '没有数据',
						icon: 'error'
					})
					
				}
				this.$refs.auiLoading.hide()
				return res.data
				
			},
			async getAppVersionInfo() {
				const { data: res } = await this.$http({
					url: this.$api.getAppInfo,
					method: 'POST',
					data: {
						appid: '__UNI__877D058'
					}
				})
				if (res.status !== 200) {
					return 
				}
				this.app_force = res.data.app_force
				await this.$promise(500)
				this.$refs.app_update.update(res.data)
			},
			// 公告
			itemClick(e) {
				console.log(e)
			},
			popupNoticeClick() {
				this.noticeShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

	.header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 210rpx;
		background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
		
		.statusBar {
			width: 100%;
		}
		
		.serachview {
			display: flex;
			align-items: center;
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			
			view {
				background-color: rgba(255, 255, 255, 0.3);
				margin-right: 20rpx;
				border-radius: 50px;
				color: #fff;
			}
			
			.search {
				flex: 5;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 70rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
				.iconfont {
					font-size: 20px;
					margin: 0 30rpx 0 30rpx
				}
				text {
					color: #f5f5f5;
				}
			}
			
			.record {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 70rpx;
				padding: 0 30rpx;
				.iconfont {
					font-size: 20px;
					margin: 0 5rpx 0 0;
				}
				
				
			}
		}
	}
	// 菜单栏
	.swiperNavBar {
		flex: 1;
		width: 100%;
		white-space: nowrap;
	}
	
	.videoContent {
		flex: 1;
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		
		
		
	}
	.swiper {
		width: 100%;
	}
	
	.mask{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:888;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.messBox{
		position: absolute;
		top:0;
		z-index:998;
		width:80%;
		left:10%;
		padding:10rpx 0rpx;
		.wrapBox{
			background-color: #ffffff;
			border-radius: 20rpx;
			padding:30rpx;
			.title{
				text-align:center;
				font-size: 32rpx;
				font-weight: bold;
			}
			.desc{
				height:400rpx;
				margin-top:20rpx;
				font-size: 30rpx;
			}
		}
	}
	
	.wrapBox{
			position: absolute;
			width:80%;
			left:50%;
			top:320rpx;
			padding:10rpx 0rpx;
			text-align:center;
			transform: translateX(-50%);
			.tips{
				font-size:35rpx;
				color:#fff;
				font-weight:bold;
				text{
					font-weight: normal;
				}
			}
			.money{
				font-size: 35rpx;
				color:#fff;
				margin-top:30rpx;
				font-weight: bold;
				text{
					font-size: 50rpx;
				}
			}
			.btn{
				width:80%;
				margin:20rpx auto;
				margin-top:40rpx;
				padding:20rpx 0px;
				text-align:center;
				background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
				border-radius: 34px;
				font-size: 30rpx;
				color:#ffffff;
				font-weight: bold;
			}
		}
</style>
